<template>
  <div class="loading-container" :class="{ 'fullscreen': fullscreen, 'overlay': overlay }">
    <!-- 基础加载动画 -->
    <div v-if="type === 'spinner'" class="loading-spinner">
      <div class="spinner-ring">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <p v-if="text" class="loading-text">{{ text }}</p>
    </div>

    <!-- 脉冲加载动画 -->
    <div v-else-if="type === 'pulse'" class="loading-pulse">
      <div class="pulse-dot"></div>
      <div class="pulse-dot"></div>
      <div class="pulse-dot"></div>
      <p v-if="text" class="loading-text">{{ text }}</p>
    </div>

    <!-- 进度条加载 -->
    <div v-else-if="type === 'progress'" class="loading-progress">
      <div class="progress-bar">
        <div class="progress-fill" :style="{ width: `${progress}%` }"></div>
      </div>
      <p v-if="text" class="loading-text">{{ text }} {{ progress }}%</p>
    </div>

    <!-- 苹果风格加载动画 -->
    <div v-else-if="type === 'apple'" class="loading-apple">
      <div class="apple-spinner">
        <svg width="40" height="40" viewBox="0 0 40 40">
          <circle
            cx="20"
            cy="20"
            r="18"
            fill="none"
            stroke="#007AFF"
            stroke-width="2"
            stroke-linecap="round"
            stroke-dasharray="28 28"
            stroke-dashoffset="28"
          >
            <animate
              attributeName="stroke-dashoffset"
              values="28;0;-28"
              dur="1.5s"
              repeatCount="indefinite"
            />
            <animateTransform
              attributeName="transform"
              type="rotate"
              values="0 20 20;360 20 20"
              dur="1.5s"
              repeatCount="indefinite"
            />
          </circle>
        </svg>
      </div>
      <p v-if="text" class="loading-text">{{ text }}</p>
    </div>

    <!-- 波浪加载动画 -->
    <div v-else-if="type === 'wave'" class="loading-wave">
      <div class="wave-container">
        <div class="wave-bar" v-for="i in 5" :key="i" :style="{ animationDelay: `${i * 0.1}s` }"></div>
      </div>
      <p v-if="text" class="loading-text">{{ text }}</p>
    </div>

    <!-- 默认旋转加载 -->
    <div v-else class="loading-default">
      <div class="default-spinner"></div>
      <p v-if="text" class="loading-text">{{ text }}</p>
    </div>
  </div>
</template>

<script setup name="Loading">
defineProps({
  // 加载动画类型
  type: {
    type: String,
    default: 'apple',
    validator: (value) => ['spinner', 'pulse', 'progress', 'apple', 'wave', 'default'].includes(value)
  },
  // 是否全屏显示
  fullscreen: {
    type: Boolean,
    default: false
  },
  // 是否显示遮罩层
  overlay: {
    type: Boolean,
    default: false
  },
  // 加载文本
  text: {
    type: String,
    default: ''
  },
  // 进度（用于progress类型）
  progress: {
    type: Number,
    default: 0,
    validator: (value) => value >= 0 && value <= 100
  }
})
</script>

<style scoped>
/* 加载容器 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.loading-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba(248, 249, 250, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.loading-container.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* 加载文本 */
.loading-text {
  margin-top: 16px;
  color: #6c757d;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
  line-height: 1.4;
}

/* 旋转加载动画 */
.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.spinner-ring {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
}

.spinner-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 32px;
  height: 32px;
  margin: 4px;
  border: 3px solid #007AFF;
  border-radius: 50%;
  animation: spinner-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #007AFF transparent transparent transparent;
}

.spinner-ring div:nth-child(1) { animation-delay: -0.45s; }
.spinner-ring div:nth-child(2) { animation-delay: -0.3s; }
.spinner-ring div:nth-child(3) { animation-delay: -0.15s; }

@keyframes spinner-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 脉冲加载动画 */
.loading-pulse {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  background: #007AFF;
  border-radius: 50%;
  margin: 0 3px;
  animation: pulse 1.4s ease-in-out infinite both;
  display: inline-block;
}

.pulse-dot:nth-child(1) { animation-delay: -0.32s; }
.pulse-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes pulse {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* 进度条加载 */
.loading-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #e9ecef;
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #007AFF, #5AC8FA);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* 苹果风格加载 */
.loading-apple {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.apple-spinner {
  width: 40px;
  height: 40px;
}

/* 波浪加载动画 */
.loading-wave {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wave-container {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 40px;
}

.wave-bar {
  width: 4px;
  background: #007AFF;
  border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}

@keyframes wave {
  0%, 40%, 100% {
    height: 8px;
  }
  20% {
    height: 32px;
  }
}

/* 默认加载动画 */
.loading-default {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.default-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #007AFF;
  border-radius: 50%;
  animation: default-spin 1s linear infinite;
}

@keyframes default-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
  .loading-container.fullscreen {
    background: rgba(28, 28, 30, 0.95);
  }

  .loading-container.overlay {
    background: rgba(44, 44, 46, 0.9);
  }

  .loading-text {
    color: #8e8e93;
  }

  .progress-bar {
    background: #3a3a3c;
  }

  .default-spinner {
    border-color: #3a3a3c;
    border-top-color: #0a84ff;
  }

  .spinner-ring div {
    border-color: #0a84ff transparent transparent transparent;
  }

  .pulse-dot {
    background: #0a84ff;
  }

  .wave-bar {
    background: #0a84ff;
  }
}

/* 响应式设计 */
@media (max-width: 480px) {
  .loading-progress {
    width: 150px;
  }

  .loading-text {
    font-size: 13px;
  }
}
</style>